<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            padding: 100px;
        }

        .div {
            margin: 50px;
            width: 50px;
            height: 50px;
            background: red;
            transition: .1s;
            transform: center center;
            /* transform-origin: left center; */
        }
    </style>
    <script>
        /**
            matrix(1,0,0,1,0,0)
            matrix(a,b,c,d,e,f)
            位移
            x轴位移：e+100
            y轴位移：f+100
            缩放
            x轴缩放:
            a=x*a
            c=x*c
            e=x*e
            y轴
            b=x*b
            d=x*d
            f=x*f
        先位移缩放
        matrix(1,0,0,1,100,100)
        matrix(.5,0,0,.5,50,50)
        先缩放后位移
        matrix(.5,0,0,.5,50,50)
        matrix(.5,0,0,.5,100,100)
        斜切
        X斜切
        c=Math.tan();
        y斜切
        b=Math.tan();
        角度转弧度=deg*Math.PI/180
        旋转
            a=Math.cos(deg*Math.PI/180);
            b=Math.sin(deg*Math.PI/180);
            c=Math.sin(deg*Math.PI/180);
            d=Math.cos(deg*Math.PI/180);
        */
        document.addEventListener("ontouchstart", function (ev) {
            ev.preventDefault();
        })
        window.onload = function () {
            var div = document.querySelectorAll('.div');
            // var b=Math.tan(30*Math.PI/180);
            // var c=Math.tan(30*Math.PI/180);
            var deg=45;
            var a=Math.cos(deg/180*Math.PI);
            var b=Math.sin(deg/180*Math.PI);
            var c=-Math.sin(deg/180*Math.PI);
            var d=Math.cos(deg/180*Math.PI);
            // div[0].style.WebkitTransform = div[0].transform = "matrix(1,0,"+b+",1,0,0)";
            console.log("matrix("+a+","+b+","+c+","+d+",0,0)");
            div[0].style.WebkitTransform = div[0].transform = "matrix("+a+","+b+","+c+","+d+",0,0)";
            
            // console.log(getComputedStyle(div[0]["transform"]));
        }
    </script>
</head>

<body>
    <div id="box">
        <div class="div"></div>
    </div>
</body>

</html>